<template>
  <div>
    <!-- :show-file-list="false" -->
    <div class="upload-listof">
      <!-- 编辑框  导入上传 -->
      <div class="upload-listof">
        <el-upload
          class="file-uploader"
          ref="upload"
          name="file"
          :headers="headers"
          :show-file-list="false"
          multiple
          action="/api/system/customer/importFile"
          :on-success="handleFileSuccess"
          :before-upload="beforeUpload"
          :on-change="onChangeFile"
        >
          <el-tooltip
            class="item"
            effect="light"
            content="上传"
            placement="top-start"
          >
            <i
              class="el-icon-circle-plus"
              style="font-size: 40px; margin-left: 15px; color: #8775ff"
            ></i>
          </el-tooltip>
        </el-upload>
        <el-tooltip
          class="item"
          effect="light"
          content="重置"
          placement="top-start"
        >
          <i
            @click="handremove"
            class="el-icon-refresh-right"
            style="font-size: 40px; margin-left: 15px; color: #8775ff"
          ></i>
        </el-tooltip>
      </div>
      <!-- 右侧 -->
      <div>
        <el-button
          class="btn-hover"
          style="background-color: #8775ff; color: #fff"
          @click="handInterpretation"
          >开始解读</el-button
        >
        <el-button
          class="btn-hover"
          style="background-color: #8775ff; color: #fff"
          @click="handArchive"
          >存档</el-button
        >
        <el-button
          class="btn-hover"
          style="
            background-color: #fff;
            color: #8775ff;
            border: 1px solid #8775ff;
          "
          @click="batchExport"
          >导出</el-button
        >
      </div>
    </div>
    <div>
      <div style="margin: 20px 0">
        上传进度
        {{ tableData.length }}
        /
        {{ tableData.length }}
      </div>

      <el-table
       ref="multipleTable"
        :data="tableData"
        stripe
        style="width: 100%"
        :style="{ height: warpHeight - 100 }"
        @selection-change="handleSelectionChange"
      >
        >
        <template slot="empty">
          <el-empty description="啊哦~还没有数据哦">
            <el-upload
              class="file-uploader"
              ref="upload"
              name="file"
              :headers="headers"
              :show-file-list="false"
              multiple
              action="/api/system/customer/importFile"
              :on-success="handleFileSuccess"
              :before-upload="beforeUpload"
              :on-change="onChangeFile"
            >
              <el-button
                class="btn-hover"
                style="background-color: #8775ff; color: #fff"
              >
                去上传</el-button
              >
            </el-upload>
          </el-empty>
        </template>
        <el-table-column width="55" type="selection"> </el-table-column>
        <el-table-column prop="serial" label="序号" width="180">
        </el-table-column>
        <!-- <el-table-column width="20" type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <div
                style="
                  width: 60%;
                  margin: auto;
                  height: 200px;
                  border: 1px solid;
                "
              >
                <section
                  style="
                    display: flex;
                    margin-left: 100px;
                    justify-content: space-between;
                  "
                >
                  <div>编号</div>
                  <div>状态</div>
                  <div>进度</div>
                </section>
              </div>
            </el-form>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="name"
          label="文件名"
          width="180"
        ></el-table-column>

        <el-table-column prop="address" label="实验室编号"> </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <!-- <el-table-column prop="progress" label="解读进度">
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.progress"></el-progress>
          </template>
        </el-table-column> -->
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <!-- <i
              class="el-icon-video-play"
              style="font-size: 25px; margin-left: 10px"
              @click="submitUpload(scope.$index, scope.row)"
            ></i> -->
            <i
              class="el-icon-delete"
              style="font-size: 25px; margin-left: 10px"
              @click="handleDelete(scope.$index, scope.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// import {
//   saveCheckResult,
//   patientInfoExport,
//   verifyByCode,
// } from "@/api/customer";
// import { paramsList, checkIll } from "@/api/user";
export default {
  mounted() {
    const { offsetHeight } = document.querySelector("body");
    this.warpHeight = offsetHeight;
    this.fileDataList =
      JSON.parse(sessionStorage.getItem("fileDataList")) || [];
    if (this.fileDataList) {
      this.tableData = this.fileDataList
        .map((fileItem, f) => {
          if (!fileItem.delte) {
            return {
              id: fileItem.uid,
              name: fileItem.name,
              serial: f + 1,
              delte: fileItem.delte,
              data: fileItem.response.data,
              // percent: 0,
              // progress: fileItem.progress || 0,
            };
          }
        })
        .filter((defind) => defind);
    }
  },
  data() {
    return {
      loadingState: null,
      source: 0,
      // 解压数据
      unpackData: [],
      fileDataList: [],
      fileList: [],
      // 存档后需导出的文件
      saveFile: [],
      warpHeight: 0,
      fileType: false,
      headers: {
        //照片上传请求头
        Authorization: "Bearer " + sessionStorage.getItem("token"),
      },
      tableData: [],
    };
  },
  methods: {
    loading(text) {
      const loading = this.$loading({
        lock: true,
        text: text,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return loading;
    },
    // 重置 清空
    handremove() {
      this.tableData = [];
      this.fileDataList = [];
      sessionStorage.setItem("fileDataList", JSON.stringify([]));
      this.$emit("getFileData", []);
    },

    beforeUpload(file) {
      let repeatState = this.tableData.filter(
        (item) => item.name === file.name
      ).length;
      if (repeatState) {
        this.$message.error("请勿上传重复的文件");
        return false;
      }

      this.loading("文件上传中");
    },
    onChangeFile(file) {
      file.delte = 0;
      file.isopen = false;
    },
    handleDelete(scopIndex, scope) {
      this.tableData.splice(scopIndex, 1);
      this.fileDataList.forEach((fileItem, f) => {
        if (fileItem.uid === scope.id) {
          fileItem.delte = 1;
          this.fileDataList.splice(f, 1);
        }
      });
      sessionStorage.setItem("fileDataList", JSON.stringify(this.fileDataList));
      this.$emit("getFileData", this.fileDataList);
    },
    /**
     * 导入病例成功
     */
    async handleFileSuccess(row, file) {
      console.log("导入病例结果", file);
      if (file.response.code === 500) {
        this.loading().close();
        this.$message.error(`${file.response.msg}`);
        return;
      }

      console.log(this.fileDataList);
      this.fileDataList.push(file);
      this.tableData = this.fileDataList
        .map((fileItem, f) => {
          if (!fileItem.delte) {
            return {
              id: fileItem.uid,
              name: fileItem.name,
              serial: f + 1,
              delte: fileItem.delte,
              data: fileItem.response.data,
              // percent: 0,
              // progress: fileItem.progress || 0,
            };
          }
        })
        .filter((defind) => defind);
      if (this.fileDataList.length >= this.fileList.length) {
        this.loading().close();
        this.$message.success("导入成功~");
      }

      sessionStorage.setItem("fileDataList", JSON.stringify(this.fileDataList));
    },
    // 解压数据
    handInterpretation() {
      if (!this.fileDataList.length) {
        this.$message.warning("请先上传文件");
        return;
      }
      // if (!this.saveFile.length) {
      //   this.$message.warning("请先勾选文件");
      //   return;
      // }
      this.unpackData = this.fileDataList
      this.loading("解读中");
      setTimeout(() => {
        this.loading().close();
        this.$message.success("解读完成");
        this.$emit("getFileData", this.unpackData);
      }, 0);
    },
    // 勾选文件下载
    handleSelectionChange(selection) {
      this.saveFile = selection;
    },
    /**
     * 存档
     * 先获取已上传文件
     *
     * **/
    handArchive() {
      // 先获取已上传文件每条数据的id
      if (!this.unpackData.length) {
        this.$message.warning("请先解压数据");
        return;
      }
      // let data = this.fileDataList.map((file) => {
      //   // 所有的数据
      //   // file.response.data.forEach(item => {
      //   //   console.log(item);
      //   // })
      //   return file.response.data;
      // });
      this.$emit("clickFiling", this.fileDataList);
      this.$refs.multipleTable.clearSelection();
    },
    // 批量导出
    batchExport() {
      if (!this.fileDataList.length) {
        this.$message.warning("请先存档");
        return;
      }
      if (!this.saveFile.length) {
        this.$message.warning("请先勾选下载的文件");
        return;
      }
      // this.$emit("saveBatchExport");
      this.$emit("saveExportExcal", this.saveFile)
      this.$refs.multipleTable.clearSelection();
    },
  },
};
</script>

<style lang="scss" scoped>
.file-uploader {
  .el-upload {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: red;
  }
}
.upload-listof {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-hover {
  border: none;
}
.btn-hover:hover {
  opacity: 0.8;
}
</style>
<style scoped></style>
